<script setup>
import ImagePreview from "@/components/ImagePreview/index.vue";
import VideoPreview from "@/components/VideoPreview/index.vue";
import {isExternal} from "@/utils/validate.js";

const props = defineProps({
  // 数据
  url: {
    type: String,
    default: ''
  },
  fileType: {
    type: String,
    default: 'image'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
})


const realSrc = computed(() => {
  if (!props.url) {
    return;
  }
  let real_src = props.src.split(",")[0];
  if (isExternal(real_src)) {
    return real_src;
  }
  return import.meta.env.VITE_APP_BASE_API + real_src;
});

const handleShowDocument = () => {
  window.open(realSrc.value)
}
</script>

<template>
  <div>
    <ImagePreview :src="url" v-if="fileType === 'image'" :width="width" :height="height"/>

    <VideoPreview :src="url" v-else-if="fileType === 'video'" :width="width" :height="height"/>

    <div class="document" v-else-if="fileType === 'document'" :style="{
        width: width,
        height: height
      }">
      <el-link type="primary" @click="handleShowDocument()">查看文档</el-link>
    </div>
  </div>
</template>

<style scoped lang="scss">
.document {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8e8e8;
}
</style>
